<template>
  <div class="propertyBank">
    <el-container>
      <div class="head" id="head1">
        <div class="tit">楼盘列表
          <span class="add" @click="addPB('add')">添加楼盘</span>
        </div>
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
          <!-- <el-form-item prop="region">
            <el-cascader size="mini"
              expand-trigger="hover"
              :options="areaData"
              v-model="formInline.region" placeholder="区域商圈" clearable>
            </el-cascader>
          </el-form-item> -->
          <el-form-item prop="user">
            <el-input size="mini" v-model="formInline.user" placeholder="楼盘名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <span @click="resetForm('formInline')" class="reset">
              <i class="icon iconfont icon-icon901"></i> 重置
            </span>
          </el-form-item>
        </el-form>
      </div>
      <el-main style="height:100%">
        <propertyBankList></propertyBankList>
      </el-main>
      <el-footer id="foot">
        <el-pagination size="mini" background layout="total,sizes,prev, pager, next" @size-change="sizeChange" @current-change="page" :current-page="formInline.page" :total="listNum" :page-sizes="[20, 30, 50, 100]"></el-pagination>
      </el-footer>
    </el-container>
    <addPropertyBank></addPropertyBank>
    <pedestalList></pedestalList>
    <selectMap></selectMap>
  </div>
</template>
<script>
import propertyBankList from './propertyBankList.vue' //楼盘列表
import addPropertyBank from './addPropertyBank.vue'  //添加楼盘
import pedestalList from './setPedestal/pedestalList.vue' //栋座设置列表
import selectMap from "./selectMap.vue" 
import { request } from "../../assets/request.js";
import {session,trim,selectArea} from '../../assets/session.js'
export default {
  data() {
    return {
      height: 0,
      formInline: {
        user: "",
        region: [],
        size:20,
        page:1
      },
      listNum:10,
      areaData:[],
      selectedOptions2:[]
    };
  },
  created() {
    // this.selectList()  //查询商圈
    let that=this
    selectArea(that)   //查询城市区域
    this.parameterList()
    this.$root.$on("propertBank",data=>{
      this.listNum=data
    })
    this.$root.$on("refresh",data=>{
      if(data.page){
        let formInline= this.formInline
        formInline.page=data.page
      }
    })
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.selectedOptions2=[]
    },
    onSubmit() {   //搜索查询
      let that=this
      let formInline=that.formInline
      formInline.size=20
      that.formInline=formInline
      let name=trim(that.formInline.user)
      let obj={size:that.formInline.size,page:that.formInline.page,houseName:name,cityAreaId:that.formInline.region[2]}
      this.$root.$emit("onSubmit",obj)
    },
    addPB(type){
      console.log(this.$store.state.urbanArea)
      let that=this
      if(this.$store.state.urbanArea){
        this.$root.$emit("addPB",type)
      }else{
        selectArea(that)
        this.$root.$emit("addPB",type)
      }
      
    },
    pedestalList(){
      this.$root.$emit("pedestalList",'no')
    },
    selectMap(){
      this.$root.$emit("selectMap",'no')
    },
    page(e){ //页码
      // console.log(e)
      let that=this
      let formInline=that.formInline
      formInline.page=e
      that.formInline=formInline
      let obj={size:that.formInline.size,page:that.formInline.page,houseName:that.formInline.user}
      this.$root.$emit("onSubmit",obj)
    },
    sizeChange(e){ //每页数量
      let that=this
      let formInline=that.formInline
      formInline.size=e
      formInline.page=1
      that.formInline=formInline
      let obj={size:that.formInline.size,page:that.formInline.page,houseName:that.formInline.user}
      this.$root.$emit("onSubmit",obj)
    },
    parameterList(){  //查找系统参数  
      let that=this   //解决this指向问题
      // if(that.$store.state.developers!=''){
      //   return
      // }
      let url1 = "constant/second/12";
      console.log(url1)
      request.ajaxGet({  //开发商
          url:url1,
          that,
          fn(resp){
            that.$store.state.developers=resp
            console.log(resp)
          }
      })
    }
  },
  mounted() {
    let height = `${document.documentElement.clientHeight}`;
    let headH = document.getElementById("head1").offsetHeight;
    let footH = document.getElementById("foot").offsetHeight;
    this.height = parseInt(height) - (headH + footH+62);
  },
  components:{
    propertyBankList, //楼盘列表
    addPropertyBank,   //添加楼盘
    pedestalList,
    selectMap,
  },
};
</script>
<style lang="less" scoped>
.propertyBank {
  width: 100%;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  padding: 123px 0px 60px 0px;
  .el-container{
    height: 100%;
  }
  .head {
    background: #ffffff !important;
    text-align: left;
    font-size: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
    padding: 0px 20px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
  }
  .head .tit {
    line-height: 60px;
    color: #222222;
    font-weight: 700;
  }
  .el-form-item__label {
    float: left !important;
  }
  .el-form-item__label::after {
    float: left !important;
  }
  .el-form-item__label::before {
    float: left !important;
    
  }

  .el-main {
    padding: 20px;
    box-sizing: border-box;
  }
  .el-footer {
    background: #f5f5f5;
    text-align: right;
    padding: 15px;
    border-top: 1px #eeeeee solid;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
  }
  .el-form-item__label {
    float: right;
  }
}
.reset {
  margin-left: 20px;
  color: #97a8be !important;
  cursor: pointer;
}
.head {
  .add {
    font-weight: 700;
    color: #3399ff;
    float: right;
    font-size: 14px;
    cursor: pointer;
  }
}
</style>